<template>
    <div class="newcomerDiscountPage">
      <div class="header">
        <img src="@/assets/images/left-jt.png" alt="" class="img" @click="backHandle">
        <span>折扣限购</span>
      </div>
      <SeachTable class="seachTable" 
        :tableType="1" 
        ref="searchTableRef" 
        :forms="tableForms" 
        :btnLefts="btnLefts"
        :btnRights="btnRights" 
        :tableLoading="tableLoading" 
        :tableConfig="tableConfig" 
        :tableData="tableData"
        :totalPage="total" 
        @handlerSearch="handlerSearch"
        >

          <template #activeName="{ row }">

            <el-tooltip
                  class="box-item"
                  effect="dark"
                  :content="row.activityName"
                  placement="top"
              >
                <div class="a-link" @click="lookDetail(row.id)">{{ row.activityName }}</div>
              </el-tooltip>
              
            </template>
        </SeachTable>
    </div>
  </template>
  
  <script setup>
  import { useActivityData } from '../../Hooks/index'
  import { useCurd,DiscountData } from './index'
  import { useMarketInfoStore } from '@/stores/marketing.js'
  import { useRouter, useRoute } from 'vue-router'
   const useMarketStore = useMarketInfoStore()
   const router = useRouter()
  const {
    tableLoading,
    total,
    tableData,
    btnLefts,
    btnRights,
    tableConfig,
    tableForms,
    handlerSearch,
  } = useCurd()
  const {searchTableRef} = DiscountData()
  const {
    isShowDiscountRestriction
  } = useActivityData() 
  const backHandle = ()=>{
    isShowDiscountRestriction.value = false
    useMarketStore.setMarketIndex({
        isShowDiscountRestriction:false,
        isShowNewcomerDiscount:true
    })
  }


  //  跳转链接
  const lookDetail = (id)=>{
    router.push({name:'DiscountRestrictionDetail',query:{id:id}})
  }
  </script>
  
  <style lang="less" scoped>
  div{
    box-sizing: border-box;
  }
  .newcomerDiscountPage{
    height: calc(100% - 50px);
  }
  
  .header {
    padding-left: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 48px;
    font-size: 16px;
    color: #000;
    font-weight: 600;
    border-bottom: 1px solid #DDD;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(0deg, #FFF 0%, #FFF 100%), #FFF;
  
    .img {
      cursor: pointer;
      width: 16px;
      height: 16px;
      position: relative;
    }
  }
  .seachTable{
    height: calc(100% - 50px);
    :deep(.search-table){
      .line-block{
        display: none;
      }
      .btn-area{
        padding-top: 0;
      }
      .search-line{
        padding-top: 16px;
        padding-bottom: 2px;
      }
    }
    .a-link{
      color:#3480FF;
      font-size: 14px;
      cursor: pointer;
      white-space: nowrap; /* 防止文本换行 */
      overflow: hidden;    /* 隐藏溢出部分 */
      text-overflow: ellipsis; /* 显示省略号 */
    }

  }

  </style>

  <!-- 删除按钮样式 -->


  <style lang="less">
  .delete{
      background: #FF2440 !important;
  }
  </style>  

